<template>
	<div class="header-container">
		<el-col :span="24" class="header">
			<el-col :span="24" class="top">
				<el-col :span="4" class="logo" v-if="loginLogo != ''">
					<img style="width:160px;" :src="loginLogo" />
				</el-col>
			</el-col>
			<el-col :span="24" class="nav-top">
				<el-col :span="6" class="nav-top-title" :title="loginTitleMessage">{{ loginTitleMessage }}</el-col>
				<el-col :span="16">
					<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" v-if="roleId == 1" :router="true">
                        <el-menu-item index="/student/index"><img src="./../assets/images/user_icon1.png" title="实训项目" />实训案例</el-menu-item>
                        <el-menu-item index="/student/trainingReport"><img src="./../assets/images/user_icon4.png" title="实训报告" />实训报告</el-menu-item>
                        <el-menu-item index="/student/commonTool"><img src="./../assets/images/user_icon2.png" title="常用工具" />常用工具</el-menu-item>
                        <el-menu-item index="/student/trainingStatistics"><img src="./../assets/images/user_icon3.png" title="实训统计" />实训统计</el-menu-item>
					</el-menu>
                    <el-menu :span="24" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" v-if="roleId == 2" :router="true">
                        <el-menu-item :span="3" index="/teacher/index"><img src="./../assets/images/user_icon1.png" title="实训项目" />实训案例</el-menu-item>
                        <el-menu-item :span="3" index="/teacher/teachingMgt"><img src="./../assets/images/user_icon6.png" title="教学管理" />教学管理</el-menu-item>
                        <el-menu-item :span="3" index="/teacher/trainingReport"><img src="./../assets/images/user_icon4.png" title="实训报告" />实训报告</el-menu-item>
                        <el-menu-item :span="3" index="/teacher/virtualMachineMgt"><img src="./../assets/images/user_icon7.png" title="虚机管理" />虚机管理</el-menu-item>
                        <el-menu-item :span="3" index="/teacher/projectProduction"><img src="./../assets/images/user_icon5.png" title="实训项目制作" />案例制作</el-menu-item>
                        <el-menu-item :span="3" index="/teacher/commonTool"><img src="./../assets/images/user_icon2.png" title="常用工具" />常用工具</el-menu-item>
                        <el-menu-item :span="3" index="/teacher/classTrainingStatistics"><img src="./../assets/images/user_icon3.png" title="实训统计" />实训统计</el-menu-item>
                        <!-- <el-menu-item :span="3" index="/teacher/messageMgt"><img src="./../assets/images/user_icon12.png" title="实训报告" />消息管理</el-menu-item> -->
					</el-menu>
                    <el-menu :span="24" :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect" v-if="roleId == 3 || roleId == 4" :router="true">
                        <el-menu-item :span="3" index="/admin/teacherMgt"><img src="./../assets/images/user_icon8.png" title="实训管理" />实训管理</el-menu-item>
                        <el-menu-item :span="3" index="/admin/presetItems"><img src="./../assets/images/user_icon13.png" title="案例管理" />案例管理</el-menu-item>
                        <el-menu-item :span="3" index="/admin/studentVirtualConfig"><img src="./../assets/images/user_icon9.png" title="虚机管理" />虚机管理</el-menu-item>
                        <el-menu-item :span="3" index="/admin/userMgt"  v-if="roleId != 4"><img src="./../assets/images/user_icon10.png" title="用户管理" />用户管理</el-menu-item>
                        <el-menu-item :span="3" index="/admin/templateSet"><img src="./../assets/images/user_icon11.png" title="系统功能" />系统功能</el-menu-item>
                        <!-- <el-menu-item :span="3" index="/admin/templateSet"><img src="./../assets/images/user_icon11.png" title="报告模板设置" />报告模板</el-menu-item> -->
					</el-menu>
				</el-col>
                <el-col :span="2">
                    <el-col :span="14" class="close-btn" @click.native="logout">
                        <img src="./../assets/images/close_icon.png" />
                        <span>退出登录</span>
                    </el-col>
				</el-col>
			</el-col>
		</el-col>
	</div>
</template>

<script>
    import { mapState } from 'vuex'
	export default {
        name: 'top',
		data() {
			return {
                activeIndex: '',
                roleId: '',
                loginTitleMessage: '',
                loginLogo: '',
			}
        },
        created() {
            let self = this
            this.roleId = JSON.parse(window.localStorage.getItem('access-user')).roleId
            this.loginTitleMessage = JSON.parse(window.localStorage.getItem('access-user')).loginTitleMessage
            this.loginLogo = JSON.parse(window.localStorage.getItem('access-user')).loginLogo
            this.fetchDate()
        },
        computed:{
			...mapState(['itemServiceValue', 'chapterType','itemServiceType'])
		},
		methods: {
            handleSelect(index) {
                this.activeIndex = index
            },
            fetchDate() {
                let self = this
                var cur_path = this.$route.matched[1].path; //获取当前路由
                var routers = this.$router.options.routes; // 获取路由对象
                var nav_type = "/student/index", nav_name = "/student/index";
                for (var i = 0; i < routers.length; i++) {
                    var children = routers[i].children;
                    if(children){
                        for (var j = 0; j < children.length; j++) {
                            if (children[j].path === cur_path) {
                                nav_type = routers[i].type;
                                nav_name = routers[i].name;
                                break;
                            }
                        }
                    }
                }
                this.$store.state.topNavState = nav_type;
                this.$store.state.leftNavState = nav_name;
                this.activeIndex = nav_name;
                if(cur_path == '/student/projectintroduction' || cur_path == '/student/projectintroductionCustomize' || cur_path == '/student/businessProcess' || cur_path == '/student/environmentIntroduce' || cur_path == '/student/projectTraining' || cur_path == '/student/projectDocumentation' || cur_path == '/student/projectSourceCode'){
                    this.activeIndex = '/student/index'
                }
                if(cur_path == '/teacher/projectintroduction' || cur_path == '/teacher/businessProcess' || cur_path == '/teacher/environmentIntroduce' || cur_path == '/teacher/projectTraining' || cur_path == '/teacher/projectDocumentation' || cur_path == '/teacher/projectSourceCode'){
                    this.activeIndex = '/teacher/index'
                }
                if(cur_path == '/teacher/productionProjectProfile' || cur_path == '/teacher/productionProjectFlow' || cur_path == '/teacher/productionProjectEnvironment' || cur_path == '/teacher/productionProjectTraining' || cur_path == '/teacher/productionProjectDocument' || cur_path == '/teacher/productionProjectCode'){
                    this.activeIndex = '/teacher/projectProduction';
                }
                if(cur_path == '/admin/projectintroduction' || cur_path == '/admin/businessProcess' || cur_path == '/admin/environmentIntroduce' || cur_path == '/admin/projectTraining' || cur_path == '/admin/projectDocumentation' || cur_path == '/admin/projectSourceCode'){
                    this.activeIndex = '/admin/presetItems'
                }
                // //设置实训项目菜单显示隐藏类型
                // if(cur_path == '/student/index' || cur_path == '/teacher/index'){
                //     localStorage.setItem('item-service-type-id', JSON.stringify({ itemServiceType: 1 }))
                // }else if(cur_path == '/admin/presetItems'){
                //     localStorage.setItem('item-service-type-id', JSON.stringify({ itemServiceType: 3 }))
                // }

            },
            //推出登陆
            logout() {
                let that = this;
                this.$confirm('确认退出吗?', '提示', {
                    confirmButtonClass: 'el-button--warning'
                }).then(() => {
                    //确认
                    that.$http.get('/dataplatform/logout').then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            localStorage.removeItem('access-user');
                            that.$store.commit('updateItemServiceValue', '')
                            that.$store.commit('updateChapterType', '')
                            that.$store.commit('updateItemServiceType', '')
                            that.$router.replace('/login'); //用go刷新
                        }else if(res.code == '401'){
                            self.$router.replace({
                                path:'/login'
                            })
                        }else{
                            self.$message.error(res.message)
                        }
                    })
                }).catch(() => {});
            }
        },
		watch: {
            "$route": "fetchDate",
            deep: true
		}
	}
</script>
